<script>
import selectUser from '@/components/selectUser/index.vue';
import {getGoodsDetail, addEleCouponOrders} from "@/api/mall";
import {GetUserCoupons} from '@/api/homePage.js';

export default {
  name: "buyTickets",
  components: {
    selectUser
  },
  data() {
    return {
      // 线路数据
      routeInfo: null,
      // 区域和线路ID
      locationId: 2,
      routeId: 1,
      
      // 表单数据
      form: {
        specId: '', // 规格ID
        price: 0
      },
      products: {},
      
      // 价格列表 
      priceList: [],
      
      // 选中的价格索引
      selectedPriceIndex: 0,
      
      // 加载状态
      loading: true,
      
      btnLoading: false,
      
      // 节流相关
      isSubmitting: false, // 是否正在提交订单
      submitDisabled: false, // 按钮是否禁用

      // 优惠券相关数据
      hasCoupons: false,
      useCoupons: [],
      couponTotalDiscount: 0,
      
      // 价格动画
      lastTotalPrice: 0,

      // 乘客相关数据
      passengers: [],
      currentSelectedGuests: []
    }
  },
  watch: {
    '$i18n.locale'() {
      // 监听语言变化，重新设置导航栏标题
      this.setNavigationTitle();
    },
    // 监听总价变化
    totalPrice(newVal, oldVal) {
      if (oldVal && newVal !== oldVal) {
        this.lastTotalPrice = parseFloat(oldVal);
      }
    }
  },
  computed: {
    // 计算总价
    totalPrice() {
      let totalPrice = this.form.price * this.ticketCount;
      
      // 减去优惠券折扣
      if (this.couponTotalDiscount > 0) {
        totalPrice -= this.couponTotalDiscount;
        // 确保价格不低于0
        totalPrice = Math.max(0, totalPrice);
      }
      
      // 四舍五入保留两位小数
      totalPrice = Math.round(totalPrice * 100) / 100;
      
      return totalPrice;
    },

    // 是否可以提交订单
    canSubmitOrder() {
      // 检查必要的票务信息
      if (!this.routeInfo) return false;

      // 检查乘客信息
      if (this.passengers.length === 0) return false;

      // 检查是否选择了价格
      if (this.selectedPriceIndex === -1) return false;

      return true;
    },

    // 票务数量 - 等于乘客数量
    ticketCount() {
      return Math.max(1, this.passengers.length);
    }
  },
  onShow() {
    // 添加优惠券选择监听
    uni.$on('couponSelected', this.onCouponSelected);
  },
  onHide() {
    // 移除监听
    uni.$off('couponSelected', this.onCouponSelected);
  },
  onUnload() {
    // 移除监听
    uni.$off('couponSelected', this.onCouponSelected);
  },
  onLoad(option) {
    // 设置导航栏标题
    this.setNavigationTitle();
    
    // 获取路由参数中的线路ID和区域ID
    const routeId = parseInt(option.id || '1');
    const locationId = parseInt(option.locationId || '2'); // 默认东澳岛
    this.locationId = locationId;
    this.routeId = routeId;
    console.log('接收到的线路ID:', routeId, '区域ID:', locationId);
    
    // 获取路线数据
    if (option.routeData) {
      try {
        this.routeInfo = JSON.parse(decodeURIComponent(option.routeData));
        this.getThePriceOfTheLine();
      } catch (e) {
        console.error('解析路线数据失败', e);
        this.goBackToList();
      }
    } else {
      // 如果没有传入路线数据，则返回列表页
      uni.showToast({
        title: this.$t('traffic.buyTickets.noRouteDataError'),
        icon: 'none'
      });
      this.goBackToList();
    }
  },
  methods: {
    // 返回列表页
    goBackToList() {
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    },
    
    // 获取线路价格
    getThePriceOfTheLine() {
      if (!this.routeInfo || !this.routeInfo.productId) {
        console.error('没有找到产品ID');
        return;
      }
      
      this.loading = true;
      
      getGoodsDetail({
        Id: this.routeInfo.productId
      }).then(res => {
        if (res && res.Data) {
          const data = res.Data;
          this.products = res.Data
          // 获取价格列表
          if (data.ProductSpecList && data.ProductSpecList.length > 0) {
            this.priceList = data.ProductSpecList.map(item => {
              return {
                id: item.Id,
                name: item.SpecName || '标准票',
                price: item.Price,
                productSpecId: item.Id,
                description: item.Description || '',
                shopId: item.shopId || '',
                merchantID: item.merchantID || '',
                ...item
              };
            });
            
            // 设置默认选中第一个价格
            if (this.priceList.length > 0) {
              this.selectPrice(0);
            }
          } else {
            // 如果没有规格价格，使用默认价格
            this.priceList = [{
              id: '',
              name: '标准票',
              price: this.routeInfo.ticketPrice || 10,
              description: ''
            }];
            this.selectPrice(0);
          }
          
          // 获取到产品信息后，获取优惠券
          this.getCoupon();
        }
        
        this.loading = false;
      }).catch(err => {
        console.error("获取价格失败:", err);
        // 使用默认价格
        this.priceList = [{
          id: '',
          name: '标准票',
          price: this.routeInfo.ticketPrice || 10,
          description: ''
        }];
        this.selectPrice(0);
        this.loading = false;
        
        // 即使获取价格失败，也尝试获取优惠券（如果有基本商品信息）
        this.getCoupon();
      });
    },
    
    // 选择价格
    selectPrice(index) {
      if (index >= 0 && index < this.priceList.length) {
        this.selectedPriceIndex = index;
        const selectedPrice = this.priceList[index];
        this.form.specId = selectedPrice.id;
        this.form.price = selectedPrice.price;
      }
    },
    
    // 乘客相关方法
    // 打开乘客选择弹窗
    openPassengerSelector() {
      // 更新当前已选乘客列表，用于传递给选择器组件
      this.currentSelectedGuests = [...this.passengers];

      // 打开乘客选择弹窗
      this.$refs.userSelector.open();
    },

    // 添加乘客（由选择器组件触发）
    addPassenger(passenger) {
      this.passengers.push(passenger);
    },

    // 删除乘客
    removePassenger(index) {
      this.passengers.splice(index, 1);
    },

    // 清空乘客列表（由选择器组件触发）
    clearPassengers() {
      this.passengers = [];
    },

    // 完成乘客选择（由选择器组件触发）
    onSelectComplete() {
      // 关闭选择器弹窗
      this.$refs.userSelector.close();
    },
    
    // 获取用户优惠券
    async getCoupon() {
      if (!this.products || !this.products.BusinessId) {
        console.log('商品信息未加载完成，跳过获取优惠券');
        return;
      }
      
      try {
        const {Data} = await GetUserCoupons({
          Index: 1,
          Size: 100,
          BusinessId: this.products.BusinessId,
          CouponStatus: 1
        });

        if (!Data || !Array.isArray(Data)) {
          console.warn('获取优惠券返回数据格式异常');
          this.hasCoupons = false;
          return;
        }

        const currentDate = Date.now();

        // 筛选有效优惠券
        const validCoupons = Data.filter(coupon => {
          const startTime = Date.parse(coupon.EffectStartDatetime);
          const endTime = Date.parse(coupon.EffectEndDatetime);
          return currentDate < endTime && currentDate > startTime;
        });

        // 设置是否有可用优惠券
        this.hasCoupons = validCoupons.length > 0;

      } catch (error) {
        console.error('获取优惠券失败:', error);
        this.hasCoupons = false;
      }
    },

    // 跳转到优惠券选择页面
    navigateToCoupons() {
      // 准备传递的参数
      const params = {
        businessId: this.products.BusinessId,
        totalPrice: this.totalPrice,
        productId: this.products.Id,
        selectedCoupons: this.useCoupons || [] // 传递已选择的优惠券
      };

      // 跳转到优惠券页面
      uni.navigateTo({
        url: '/mall_subpages/goods/coupons?params=' + encodeURIComponent(JSON.stringify(params))
      });
    },

    // 从优惠券页面返回时接收数据
    onCouponSelected(coupons) {
      // 记录当前价格作为起始值
      this.lastTotalPrice = this.totalPrice;

      this.useCoupons = coupons || [];

      // 计算优惠券总折扣金额
      this.calculateCouponDiscount();
    },

    // 计算优惠券总折扣金额
    calculateCouponDiscount() {
      if (!this.useCoupons || this.useCoupons.length === 0) {
        this.couponTotalDiscount = 0;
        return;
      }

      let totalDiscount = 0;
      const originalPrice = parseFloat(this.form.price * this.ticketCount);

      this.useCoupons.forEach(coupon => {
        if (coupon.CouponTemple && coupon.CouponTemple.FullReduceAmount) {
          totalDiscount += parseFloat(coupon.CouponTemple.FullReduceAmount);
        }
      });

      // 确保折扣不超过总价
      this.couponTotalDiscount = Math.min(totalDiscount, originalPrice);
    },

    // 构建优惠券参数
    buildCouponParams() {
      if (!this.useCoupons || this.useCoupons.length === 0) {
        return [];
      }

      return this.useCoupons.map(coupon => ({
        CouponCode: coupon.CouponCode,
        BusinessId: coupon.BusinessIds ? this.products.BusinessId : 0
      }));
    },
    
    // 提交订单
    async submitOrder() {
      // 防重复提交
      if (this.isSubmitting || this.submitDisabled) {
        uni.showToast({
          icon: 'none',
          title: this.$t('traffic.buyTickets.submittingToast')
        });
        return;
      }

      // 检查是否可以提交订单
      if (!this.canSubmitOrder) {
        let message = '';
        if (this.passengers.length === 0) {
          message = this.$t('ticket.booking.noPassengerError') || '请选择乘客';
        } else if (this.selectedPriceIndex === -1) {
          message = this.$t('traffic.buyTickets.selectPriceError') || '请选择票价';
        } else {
          message = this.$t('traffic.buyTickets.incompleteOrderError') || '订单信息不完整';
        }

        uni.showToast({
          title: message,
          icon: 'none'
        });
        return;
      }
      
      // 设置提交状态和按钮禁用
      this.isSubmitting = true;
      this.submitDisabled = true;
      this.btnLoading = true;
      
      try {
        const priceInfo = this.priceList[this.selectedPriceIndex];
        
        // 构建订单参数
        const orderParams = {
          BusinessId: this.products.BusinessId,
          ProductId: this.products.Id,
          ProductSpecId: priceInfo.productSpecId,
          ProductName: `${this.routeInfo.name}-${priceInfo.name}`,
          ProductType: this.products.Type,
          Price: priceInfo.price,
          Count: this.ticketCount,
          PayStatus: 0,
          Point: 0,
          Deposit: 0,
          ContactMobile: this.passengers[0]?.phone || '',
          ContactName: this.passengers[0]?.name || '',
          CouponDiscount: this.couponTotalDiscount,
          OriginalPrice: priceInfo.price,
          PlatformType: 20, // 小程序
          SettleType: 1,
          payType: 0,
          IsTicket: 1, // 电子票
          ShopId: this.products.shopId || 0,
          MerchantId: this.products.MerchantID || 0,
          Persons: this.passengers.map(passenger => ({
            name: passenger.name,
            phone: passenger.phone,
            idCard: passenger.idCard
          }))
        };

        console.log(orderParams)
        
        // 构建请求参数
        const requestParams = {
          OrderProductList: [orderParams],
          Coupons: this.buildCouponParams()
        };
        
        // 调用API提交订单
        const { Data } = await addEleCouponOrders(requestParams);
        if(Data.IsPay === 1){
          uni.redirectTo({
            url: `/mall_subpages/goods/payment?id=${Data.OrdersOnLineId}&delta=1`
          });
        }else {
          uni.showToast({
            icon: 'none',
            title: this.$t('traffic.buyTickets.createOrderFailed')
          });
        }
      } catch (error) {
        console.error("提交订单失败:", error);
        uni.showToast({
          icon: 'none',
          title: error.Msg
        });
      } finally {
        // 重置状态
        this.btnLoading = false;
        this.isSubmitting = false;
        
        // 3秒后恢复按钮可用状态，防止快速重复点击
        setTimeout(() => {
          this.submitDisabled = false;
        }, 3000);
      }
    },
    
    // 查看交通图
    viewTrafficMap() {
      uni.openEmbeddedMiniProgram({
        appId: "wx76a6823f3bb55d2b"
      })
    },

    // 设置导航栏标题
    setNavigationTitle() {
      uni.setNavigationBarTitle({
        title: this.$t('traffic.buyTickets.title')
      });
    }
  }
}
</script>

<template>
  <view class="buy-tickets-container">
    <!-- 加载中 -->
    <view class="loading-container" v-if="loading">
      <view class="loading-icon"></view>
      <text>{{$t('traffic.buyTickets.loading')}}</text>
    </view>
    
    <block v-if="!loading && routeInfo">
      <!-- 线路基本信息 -->
      <view class="route-info-card">
        <view class="route-header">
          <view class="route-name">
            <text class="name">{{routeInfo.name}}</text>
            <text class="subtitle">{{routeInfo.subtitle}}</text>
          </view>
          <view class="view-map" @click="viewTrafficMap">
            <image src="https://wzws.wanshanlundiao.cn/upload/img/20250512/202505121404589757.png" mode="aspectFit"></image>
            <text>{{$t('traffic.buyTickets.viewTrafficMap')}}</text>
          </view>
        </view>
        
        <view class="route-details">
          <text v-if="routeInfo.firstBusTime && routeInfo.lastBusTime">首车 {{routeInfo.firstBusTime}} 末车 {{routeInfo.lastBusTime}} | {{routeInfo.totalTime}}</text>
          <text v-else>{{routeInfo.totalTime || ''}}</text>
        </view>
      </view>
	  
   <!-- 乘客信息 -->
    <view class="passenger-info-card">
      <view class="info-header">
        <view class="info-title">{{$t('ticket.booking.passengerInfo')}} <text class="passenger-count-tip">({{$t('ticket.booking.passengerCountTip')}})</text></view>
        <view class="add-passenger-btn" @click="openPassengerSelector">
          <text class="add-icon">+</text>
          <text class="add-text">{{$t('ticket.booking.addPassenger')}}</text>
        </view>
      </view>

      <!-- 乘客列表 -->
      <view class="passenger-list">
        <view class="passenger-item" v-for="(passenger, index) in passengers" :key="index">
          <view class="passenger-index">{{$t('ticket.booking.passenger', {index: index + 1})}}</view>
          <view class="passenger-details">
            <text class="passenger-name">{{passenger.name}}</text>
            <text class="id-number">- {{passenger.phone}}</text>
            <text class="id-full">{{passenger.idCard}}</text>
          </view>
          <view class="delete-btn" @click="removePassenger(index)">
            <text class="delete-icon">×</text>
          </view>
        </view>

        <!-- 没有乘客时的提示 -->
        <view class="no-passenger" v-if="passengers.length === 0">
          <text class="no-passenger-tip">{{$t('ticket.booking.noPassengerTip')}}</text>
        </view>
      </view>
    </view>
      
      <!-- 价格选择区域 -->
      <view class="ticket-form">
        <view class="section-title">{{$t('traffic.buyTickets.priceSelection')}}</view>
        
        <!-- 价格单选 -->
        <view class="price-options">
          <view 
            v-for="(priceItem, index) in priceList" 
            :key="index"
            class="price-option-item"
            :class="{'active': selectedPriceIndex === index}"
            @click="selectPrice(index)"
          >
            <view class="price-option-content">
              <view class="price-name">{{priceItem.name}}</view>
              <view class="price-value">¥ {{priceItem.price}}</view>
              <view class="price-desc" v-if="priceItem.description">{{priceItem.description}}</view>
            </view>
            <view class="price-option-radio">
              <view class="radio-inner" v-if="selectedPriceIndex === index"></view>
            </view>
          </view>
        </view>
        
        <!-- 数量 -->
        <view class="form-item">
          <view class="form-label">{{$t('traffic.buyTickets.quantity')}}</view>
          <view class="form-value">
            <text>{{ticketCount}}</text>
          </view>
        </view>
        
        <!-- 总价 -->
        <view class="form-item total-price">
          <view class="form-label">{{$t('traffic.buyTickets.total')}}</view>
          <view class="form-value price-value">
            <text class="price">¥ {{totalPrice}}</text>
          </view>
        </view>
      </view>
      
      <!-- 优惠券区域 -->
      <view class="coupon-area">
        <view class="coupon-section">
          <view class="coupon-header">
            <view class="section-title">{{$t('traffic.buyTickets.coupon.title')}}</view>
            <view class="coupon-status" v-if="useCoupons.length > 0">
              {{$t('traffic.buyTickets.coupon.selected', {count: useCoupons.length, amount: couponTotalDiscount.toFixed(2)})}}
            </view>
            <view class="coupon-status available" v-else-if="hasCoupons">
              {{$t('traffic.buyTickets.coupon.available')}}
            </view>
            <view class="coupon-status unavailable" v-else>
              {{$t('traffic.buyTickets.coupon.unavailable')}}
            </view>
          </view>
          <view class="coupon-selection" @click="navigateToCoupons">
            <view class="select-text">{{$t('traffic.buyTickets.coupon.select')}}</view>
            <image src="/static/home/right-arrow-black.png" class="arrow-icon"></image>
          </view>
        </view>
      </view>
      
      <!-- 提交按钮 -->
      <view class="submit-btn-container">
        <view 
          class="submit-btn" 
          :class="{'disabled': !canSubmitOrder || isSubmitting || submitDisabled, 'loading': btnLoading}" 
          @click="submitOrder"
        >
          <view class="loading-icon" v-if="btnLoading"></view>
          <text>{{ btnLoading ? $t('traffic.buyTickets.submitting') : $t('traffic.buyTickets.bookNow') }}</text>
        </view>
      </view>
      
      <!-- 特殊服务说明 -->
      <view class="tips-card" v-if="routeInfo.id === 5 || routeInfo.specialNote">
        <view class="tips-title">{{$t('traffic.buyTickets.bookingNotice')}}</view>
        <view class="tips-content">
          <text>{{routeInfo.specialNote}}</text>
        </view>
      </view>
      
      <!-- 注意事项 -->
      <view class="tips-card" v-if="routeInfo.notes && routeInfo.notes.length > 0">
        <view class="tips-title">{{$t('traffic.buyTickets.attentionNotice')}}</view>
        <view class="tips-content">
          <view v-for="(note, index) in routeInfo.notes" :key="index" class="note-item">
            {{note}}
          </view>
        </view>
      </view>
    </block>

    <!-- 乘客选择弹窗 -->
    <uni-popup ref="userSelector" type="bottom">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">{{$t('ticket.booking.selectPassenger') || '选择乘客'}}</text>
          <text class="popup-close" @click="$refs.userSelector.close()">×</text>
        </view>
        <view class="popup-body">
          <select-user
            :selectedGuests="currentSelectedGuests"
            @select="addPassenger"
            @clear="clearPassengers"
            @complete="onSelectComplete"
          ></select-user>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<style scoped lang="scss">
.buy-tickets-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

/* 线路信息卡片 */
.route-info-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .route-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20rpx;
    
    .route-name {
      flex: 1;
      
      .name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        display: block;
        margin-bottom: 8rpx;
      }
      
      .subtitle {
        font-size: 28rpx;
        color: #666;
      }
    }
    
    .view-map {
      display: flex;
      align-items: center;
      
      image {
        width: 50rpx;
        height: 50rpx;
        margin-bottom: 5rpx;
      }
      
      text {
        font-size: 22rpx;
        color: #3a7fe6;
      }
    }
  }
  
  .route-details {
    font-size: 26rpx;
    color: #666;
    margin-bottom: 15rpx;
  }
}

/* 表单样式 */
.ticket-form {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .section-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 20rpx;
    padding-bottom: 20rpx;
    border-bottom: 1px solid #f0f0f0;
  }
  
  .price-options {
    margin-bottom: 30rpx;
    
    .price-option-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20rpx;
      margin-bottom: 15rpx;
      border-radius: 8rpx;
      border: 1px solid #f0f0f0;
      background-color: #f9f9f9;
      transition: all 0.3s ease;
      
      &.active {
        border-color: #3a7fe6;
        background-color: rgba(58, 127, 230, 0.05);
      }
      
      .price-option-content {
        flex: 1;
        
        .price-name {
          font-size: 28rpx;
          font-weight: bold;
          color: #333;
          margin-bottom: 8rpx;
        }
        
        .price-value {
          font-size: 32rpx;
          color: #ff5f34;
          font-weight: bold;
          margin-bottom: 8rpx;
        }
        
        .price-desc {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .price-option-radio {
        width: 40rpx;
        height: 40rpx;
        border-radius: 50%;
        border: 2rpx solid #ddd;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        
        .radio-inner {
          width: 24rpx;
          height: 24rpx;
          border-radius: 50%;
          background-color: #3a7fe6;
        }
      }
      
      &.active .price-option-radio {
        border-color: #3a7fe6;
      }
    }
  }
  
  .form-item {
    display: flex;
    padding: 30rpx 0;
    border-bottom: 1px solid #f0f0f0;
    align-items: center;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.total-price {
      border-top: 1px dashed #f0f0f0;
      padding-top: 40rpx;
      margin-top: 10rpx;
      
      .price {
        font-size: 36rpx !important;
      }
    }
    
    .form-label {
      width: 120rpx;
      font-size: 28rpx;
      color: #333;
    }
    
    .form-value {
      flex: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      text {
        font-size: 28rpx;
        color: #333;
      }
      
      .arrow-icon {
        width: 36rpx;
        height: 36rpx;
      }
      
      &.price-value {
        .price {
          color: #ff5f34;
          font-weight: bold;
        }
      }
    }
  }
}

/* 提交按钮 */
.submit-btn-container {
  padding: 30rpx 0;
  
  .submit-btn {
    height: 90rpx;
    background: linear-gradient(90deg, #3a7fe6, #5895e9);
    border-radius: 45rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4rpx 15rpx rgba(58, 127, 230, 0.3);
    position: relative;
    
    &.disabled {
      background: linear-gradient(90deg, #b8c6de, #a7badd);
      opacity: 0.8;
      box-shadow: none;
    }
    
    &.loading {
      background: linear-gradient(90deg, #b8c6de, #a7badd);
    }
    
    .loading-icon {
      width: 30rpx;
      height: 30rpx;
      border: 4rpx solid rgba(255, 255, 255, 0.3);
      border-top: 4rpx solid #fff;
      border-radius: 50%;
      animation: rotate 1s linear infinite;
      margin-right: 10rpx;
    }
    
    text {
      font-size: 32rpx;
      color: #fff;
      font-weight: 500;
    }
  }
}

/* 优惠券区域 */
.coupon-area {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .coupon-section {
    .coupon-header {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .section-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-right: 20rpx;
      }

      .coupon-status {
        flex: 1;
        font-size: 24rpx;
        color: #3a7fe6;

        &.available {
          color: #3a7fe6;
        }

        &.unavailable {
          color: #999;
        }
      }
    }

    .coupon-selection {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      padding: 0 20rpx;
      background-color: #f5f5f5;
      border-radius: 8rpx;

      .select-text {
        font-size: 28rpx;
        color: #666;
      }

      .arrow-icon {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }
}

/* 乘客信息卡片 */
.passenger-info-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

  .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;

    .info-title {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
      
      .passenger-count-tip {
        font-size: 24rpx;
        color: #999;
        font-weight: normal;
        margin-left: 10rpx;
      }
    }

    .add-passenger-btn {
      display: flex;
      align-items: center;
      background-color: #f8f8f8;
      padding: 6rpx 16rpx;
      border-radius: 30rpx;

      .add-icon {
        font-size: 28rpx;
        color: #3a7fe6;
        margin-right: 6rpx;
      }

      .add-text {
        color: #3a7fe6;
        font-size: 24rpx;
      }
    }
  }

  .passenger-list {
    .passenger-item {
      display: flex;
      align-items: center;
      padding: 20rpx 0;
      border-bottom: 1rpx solid #eee;

      &:last-child {
        border-bottom: none;
      }

      .passenger-index {
        font-size: 28rpx;
        color: #666;
        margin-right: 20rpx;
        min-width: 80rpx;
      }

      .passenger-details {
        flex: 1;

        .passenger-name {
          font-size: 28rpx;
          color: #333;
        }

        .id-number {
          font-size: 28rpx;
          color: #666;
          margin-left: 10rpx;
        }

        .id-full {
          display: block;
          font-size: 24rpx;
          color: #999;
          margin-top: 6rpx;
        }
      }

      .delete-btn {
        width: 60rpx;
        height: 60rpx;
        display: flex;
        align-items: center;
        justify-content: center;

        .delete-icon {
          font-size: 36rpx;
          color: #ccc;
        }
      }
    }

    .no-passenger {
      padding: 40rpx 0;
      text-align: center;

      .no-passenger-tip {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
}

/* 弹窗样式 */
.popup-content {
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  overflow: hidden;
  max-height: 80vh;

  .popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx;
    border-bottom: 1rpx solid #eee;

    .popup-title {
      font-size: 32rpx;
      font-weight: 500;
      color: #333;
    }

    .popup-close {
      font-size: 40rpx;
      color: #999;
      width: 60rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }

  .popup-body {
    max-height: calc(80vh - 100rpx);
    overflow-y: auto;
  }
}

/* 提示卡片 */
.tips-card {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-top: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .tips-title {
    font-size: 30rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 15rpx;
    position: relative;
    padding-left: 20rpx;
    
    &:before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 8rpx;
      height: 30rpx;
      background-color: #3a7fe6;
      border-radius: 4rpx;
    }
  }
  
  .tips-content {
    font-size: 26rpx;
    color: #666;
    line-height: 1.6;
    
    .note-item {
      margin-bottom: 10rpx;
      padding-left: 20rpx;
      position: relative;
      
      &:before {
        content: '•';
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
}

/* 加载状态 */
.loading-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .loading-icon {
    width: 60rpx;
    height: 60rpx;
    border: 4rpx solid #f3f3f3;
    border-top: 4rpx solid #3a7fe6;
    border-radius: 50%;
    animation: rotate 1s linear infinite;
  }
  
  text {
    margin-top: 20rpx;
    font-size: 28rpx;
    color: #999;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
</style>